<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/style.css"/>

<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">	
<!--头部-->
<header class="publicHeader">
    <h1>超市账单管理系统</h1>

    <div class="publicHeaderR">
        <p><span>下午好！</span><span style="color: #fff21b"> {{loginUser.name}}</span> , 欢迎你！</p>
        <a href="javascript:void(0)" @click="logout()">退出</a>
    </div>
</header>
<!--时间-->
<section class="publicTime">
    <span id="time">2015年1月1日 11:11  星期一</span>
    <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
</section>
<!--主体内容-->
<section class="publicMian">
    <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
            <ul class="list">
                <li ><a href="billList.html">账单管理</a></li>
                <li><a href="providerList.html">供应商管理</a></li>
                <li><a href="userList.html">用户管理</a></li>
                <li><a href="password.html">密码修改</a></li>
                <li><a href="javascript:void(0)" @click="logout()">退出系统</a></li>
            </ul>
        </nav>
    </div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>用户管理页面 >> 用户添加页面</span>
        </div>
        <div class="providerAdd">
           
                <!--div的class 为error是验证错误，ok是验证成功-->
                <div class="">
                    <label for="userId">用户编码：</label>
                    <input type="text" v-model="user.account" name="userId" id="userId"/>
                    <span>*请输入用户编码，用于登录</span>
                </div>
				
				<div class="">
				    <label for="userId">用户姓名：</label>
				    <input type="text" v-model="user.name" name="userId" id="userId"/>
				    <span>*请输入用户姓名！</span>
				</div>
               
                <div>
                    <label for="userpassword">用户密码：</label>
                    <input type="text" v-model="user.temp" name="userpassword" id="userpassword"/>
                    <span>*密码长度必须大于6位小于20位</span>

                </div>
                <div>
                    <label for="userRemi">确认密码：</label>
                    <input type="text" v-model="user.password" name="userRemi" id="userRemi"/>
                    <span>*请输入确认密码</span>
                </div>
                <div>
                    <label >用户性别：</label>

                    <select name="" v-model="user.sex" >
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </select>
                    <span></span>
                </div>
                <div>
                    <label for="data">年龄：</label>
                    <input type="text" v-model="user.age" name="data" id="data"/>
                    <span >*</span>
                </div>
                <div>
                    <label for="userphone">用户电话：</label>
                    <input type="text" v-model="user.phone"  name="userphone" id="userphone"/>
                    <span >*</span>
                </div>
                
                <div>
                    <label >用户类别：</label>
                    <input type="radio" v-model="user.type" value="0" name="userlei"/>管理员
                    <input type="radio" v-model="user.type" value="1" name="userlei"/>经理
                    <input type="radio" v-model="user.type" value="2" name="userlei"/>普通用户

                </div>
                <div class="providerAddBtn">
                    <!--<a href="#">保存</a>-->
                    <!--<a href="userList.html">返回</a>-->
                    <input type="button" value="保存" @click="save()"/>
                    <input type="button" value="返回" onclick="history.back(-1)"/>
                </div>
           
        </div>

    </div>
</section>
<footer class="footer">
</footer>
<script>
	var vue = new Vue({
		el:"#app",
		data:{
			loginUser:{},
			user:{}
		},
		methods:{
			logout:function(){
				//1.提示确认框
				//2.确认 清空session中数据
				//3.跳转到登录页面
				if(confirm("确定要退出登录?")){
					sessionStorage.clear();
					location.href = "login.html";
				}
			
			},
			save:function(){
				//请求路径
				var path = "http://localhost:8080/sms/user/save";
				//发起的是post方式请求
				this.$http.post(path,this.user).then(function(data){
					
					var r = data.body;
					
					if(r.code == 0){
						alert(r.msg);
					}else{
						//保存用户成功
						location.href = "userList.html";
					}
					
				});
			}
		},
		mounted:function(){
			//vue初始化完毕会主动触发
			var userStr = sessionStorage.getItem("user");
			var userObj = JSON.parse(userStr);
			
			this.loginUser = userObj;
		}
	});
</script>
</div>
</body>
</html>